﻿@page "/dialog/positioning"

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This example demonstrates how to position the Dialog control. Select the appropriate radio button to position where the dialog is displayed. The current position of the dialog is at the center. Enable the 'Open' button to reopen the dialog if it is closed.</p>
</SampleDescription>
<ActionDescription>
   <p>By default, the Dialog is displayed in the center of the target container. Use the <code>Position</code> property to set location where the dialog displays relative to the target. The property point-out the horizontal and vertical coordinates. You can set position with specific X and Y coordinates in pixel values.</p>
   <p>More information on the positioning of Dialog can be found in the<a target="_blank" href="https://blazor.syncfusion.com/documentation/dialog/positioning/"> documentation section </a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section" id="target">
    <div>
        @if (this.ShowButton)
        {
            <SfButton Content="Open" @onclick="@OnClicked"></SfButton>
        }
    </div>
    <SfDialog ID="defaultDialog" Width="440px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">
        <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
        <DialogTemplates>
            <Header>Choose a Dialog Position</Header>
            <Content>
                <table style="width:405px;" id="poschange">
                    <tr>
                        <td>
                            <SfRadioButton TChecked="string" Name="xy" Label="Left Top" Value="left top" @bind-Checked="@Checked" ValueChange="@OnChangeHandler"></SfRadioButton>
                        </td>
                        <td>
                            <SfRadioButton TChecked="string" Name="xy" Label="Center Top" Value="center top" @bind-Checked="@Checked" ValueChange="@OnChangeHandler"></SfRadioButton>
                        </td>
                        <td>
                            <SfRadioButton TChecked="string" Name="xy" Label="Right Top" Value="right top" @bind-Checked="@Checked" ValueChange="@OnChangeHandler"></SfRadioButton>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <SfRadioButton TChecked="string" Name="xy" Label="Left Center" Value="left center" @bind-Checked="@Checked" ValueChange="@OnChangeHandler"></SfRadioButton>
                        </td>
                        <td>
                            <SfRadioButton TChecked="string" Name="xy" Label="Center Center" Value="center center" @bind-Checked="@Checked" ValueChange="@OnChangeHandler"></SfRadioButton>
                        </td>
                        <td>
                            <SfRadioButton TChecked="string" Name="xy" Label="Right Center" Value="right center" @bind-Checked="@Checked" ValueChange="@OnChangeHandler"></SfRadioButton>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <SfRadioButton TChecked="string" Name="xy" Label="Left Bottom" Value="left bottom" @bind-Checked="@Checked" ValueChange="@OnChangeHandler"></SfRadioButton>
                        </td>
                        <td>
                            <SfRadioButton TChecked="string" Name="xy" Label="Center Bottom" Value="center bottom" @bind-Checked="@Checked" ValueChange="@OnChangeHandler"></SfRadioButton>
                        </td>
                        <td>
                            <SfRadioButton TChecked="string" Name="xy" Label="Right Bottom" Value="right bottom" @bind-Checked="@Checked" ValueChange="@OnChangeHandler"></SfRadioButton>
                        </td>
                    </tr>
                </table>
            </Content>
            <FooterTemplate>
                <span style="float:left;margin-left:8px;padding:10px;"> Position: { X: '@Xvalue', Y: '@Yvalue' }</span>
            </FooterTemplate>
        </DialogTemplates>
        <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>
    </SfDialog>
</div>

<style>
    html,
    body,
    #container {
        height: 100%;
        overflow: hidden;
        width: 100%;
    }

    #defaultDialog table,
    #defaultDialog th,
    #defaultDialog td {
        border: 1px solid #D8D8D8;
        border-collapse: collapse;
    }

    #container {
        height: 365px;
    }

    #defaultDialog .e-dialog .e-footer-content {
        padding: 0px 10px 10px;
    }

    .control-section {
        width: 98%;
    }

    .bootstrap4 #defaultDialog.e-dialog {
        height: 235px !important;
    }

    .e-dialog .e-dlgcontent {
        padding: 10px 16px 10px;
    }

    .e-radio + label .e-label {
        line-height: 18px;
    }

    td {
        padding: 4px;
    }

    .bootstrap .e-dialog .e-footer-content {
        padding: 5px;
    }

    .fabric .e-dialog .e-footer-content, .highcontrast .e-dialog .e-footer-content {
        padding-left: 11px;
    }

    .fabric .control-section, .highcontrast .control-section {
        min-height: 370px;
        margin-bottom: 37px;
        margin-top: 10px;
    }

    .control-section {
        min-height: 370px;
        margin-bottom: 14px;
        margin-top: 10px;
    }

    .highcontrast .e-dialog .e-dlg-content, .fabric .e-dialog .e-dlg-content {
        padding: 28px 19px 20px;
    }

    .fabric #target .e-dialog {
        height: 292px;
    }

    .material #target .e-dialog {
        height: 220px;
    }

    #target .e-dialog {
        height: 220px;
    }

    .highcontrast #target .e-dialog {
        height: 295px;
    }

    #target {
        min-height: 300px;
    }

    @@media (min-width: 320px) and (max-width: 480px) {
        #defaultDialog .e-dlg-content {
            overflow-x: auto;
        }
    }
</style>

@code {
    private string Xvalue = "center";
    private string Yvalue = "center";
    public string Checked { get; set; } = "center center";
    private bool Visibility { get; set; } = true;
    private bool ShowButton { get; set; } = false;

    private void DialogOpen(Object args)
    {
        this.ShowButton = false;
    }

    private void DialogClose(Object args)
    {
        this.ShowButton = true;
    }

    private void OnClicked()
    {
        this.Visibility = true;
    }

    private void OnChangeHandler(ChangeArgs<string> arg)
    {
        this.Xvalue = arg.Value.ToString().Split(' ')[0];
        this.Yvalue = arg.Value.ToString().Split(' ')[1];
        this.StateHasChanged();
    }
}